<template>
    <div>
        <div
            class="echart-h"
            id="doPlan"
            v-if="['zlzx', 'cm', 'jxdw'].includes(indexCode)"
        ></div>
        <cockpitSearch
            v-if="['jys', 'bzr'].includes(indexCode)"
            @handleSearch="handleSearch"
            @getTableData="getTableData"
            :manageType="manageType"
            ref="doplancockSearch"
            @downloadFile="downloadFile"
        ></cockpitSearch>
        <searchner
            v-else
            @handleSearch="handleSearch"
            @getTableData="getTableData"
            :manageType="manageType"
            ref="doplanSearch"
            @downloadFile="downloadFile"
        ></searchner>
        <el-table
            class="mt-10"
            data-table
            v-loading="tableLoading"
            element-loading-text="数据加载中..."
            element-loading-background="rgba(255, 255, 255, 0.2)"
            stripe
            :data="tableData"
            v-if="['zlzx', 'cm', 'jxdw'].includes(indexCode)"
        >
            <el-table-column
                label="序号"
                type="index"
                width="65"
            ></el-table-column>
            <el-table-column
                width="105"
                property="name"
                label="质控点名称"
            ></el-table-column>
            <el-table-column
                width="120"
                property="standardName"
                label="所属目标标准"
            ></el-table-column>
            <el-table-column
                width="120"
                property="objectName"
                label="所属诊改对象"
            ></el-table-column>
            <el-table-column
                property="belongParttName"
                width="130"
                label="质控点归属部门"
            ></el-table-column>
            <el-table-column
                width="90"
                property="state"
                label="完成进度"
            ></el-table-column>
            <el-table-column
                property="standardValue"
                label="标准值"
            ></el-table-column>
            <el-table-column
                property="targetValue"
                label="目标值"
            ></el-table-column>
            <el-table-column
                width="120"
                property="autoUpdateValue"
                label="业务系统数据"
            ></el-table-column>
            <el-table-column
                width="120"
                property="personnelTrainingState"
                label="填报系统数据"
            ></el-table-column>
            <el-table-column
                property="correctValue"
                label="校准值"
            ></el-table-column>
        </el-table>
        <el-table
            v-if="indexCode == 'jys' || indexCode == 'bzr'"
            class="mt-10"
            data-table
            v-loading="tableLoading"
            element-loading-text="数据加载中..."
            element-loading-background="rgba(255, 255, 255, 0.2)"
            stripe
            :data="jbTableData"
        >
            <el-table-column
                label="序号"
                type="index"
                width="65"
            ></el-table-column>
            <el-table-column
                width="105"
                property="studentName"
                :label="indexCode == 'jys' ? '教师姓名' : '学生姓名'"
            ></el-table-column>
            <el-table-column
                width="120"
                property="orgName"
                :label="indexCode == 'jys' ? '所属二级学院' : '所属学院'"
            ></el-table-column>
            <el-table-column
                width="120"
                property="className"
                :label="indexCode == 'jys' ? '所属教研室' : '所属班级'"
            ></el-table-column>
            <el-table-column
                property="notStandard"
                width="145"
                label="未达标质控点数量"
            ></el-table-column>
            <el-table-column
                width="145"
                property="upStandard"
                label="已达标质控点数量"
            ></el-table-column>
            <el-table-column
                width="175"
                property="upTarget"
                label="已完成目标质控点数量"
            ></el-table-column>
            <el-table-column
                width="175"
                property="notTarget"
                label="未完成目标质控点数量"
            ></el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="lockDetail(scope.row)"
                        >查看明细</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器-->
        <pagination
            v-show="total > 0"
            :total="total"
            :current.sync="page.pageIndex"
            :size.sync="page.pageSize"
            @pagination="pagination"
        />
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {
    getPointInfoListExport,
    getPointInfoList,
    getPointInfoEchart,
    getPointSpeedInfoList,
    getPointSpeedInfoListExport,
    getTeacherPointSpeedInfoListExport
} from '@/api/cockpit';
import { mapState } from 'vuex';
import cockpitSearch from '@/components/search/cockpitSearch.vue';
export default {
    name: 'DoPlan',
    components: { cockpitSearch },
    props: {
        manageType: {
            required: true,
            type: String,
            default: ''
        }
    },
    computed: {
        ...mapState({
            indexCode: state => state.cockpit.indexCode,
            code: state => state.cockpit.code,
            year: state => state.cockpit.year,
            stateVal: state => state.cockpit.stateVal
        })
    },
    data () {
        return {
            page: {
                pageIndex: 1,
                pageSize: 10
            },
            total: 0,
            tableData: [],
            jbTableData: [],
            searchParams: {},
            echartCode: null,
            echartState: null,
            // 下载文件类型 init 为重置或初始，search为查询时下载类型，ecchart为点击echart时下载类型
            tableDataType: 'init',
            tableLoading: false
        };
    },
    created () {},
    mounted () {
        if (['zlzx', 'cm', 'jxdw'].includes(this.indexCode)) {
            this.initEchart();
        }
        this.getTableData('init');
    },
    methods: {
        initEchart () {
            if (['bzr', 'jys'].includes(this.indexCode)) return;
            var chartDom = document.getElementById('doPlan');
            var myChart = echarts.init(chartDom);
            const params = {
                year: this.year,
                code: ['cm'].includes(this.indexCode) ? this.code : null,
                orgId: ['jxdw'].includes(this.indexCode) ? this.code : null
            };
            this.common.load(myChart);
            getPointInfoEchart(params).then(res => {
                var option;
                option = { ...this.common.doPlanOption };
                option.title.text = '执行进度分析';
                option.xAxis[0].data = res.x || [];
                option.xAxis[0].axisLabel = {
                    interval: 0,
                    formatter: (params) => {
                        // console.log('formatter', params, params.length);
                       return this.common.formatterAxisLabel(params)
                    }
                };
                option.yAxis[0].name = '单位/(%)';
                option.tooltip.formatter = params => {
                    // console.log(params, 'tool');
                    let str = `${params[0].name}<br>`;
                    if (res.z) {
                        res.z.map(child => {
                            if (params[0].name === child.type) {
                                str += `总数量 ${child.sum}条<br>
                                未完成标准数量 ${child.nofinish}条<br>
                                已完成标准数量 ${child.reach}条<br>
                                未完成目标数量 ${child.notFinsish}条<br>
                                已完成目标数量 ${child.finsish}条<br>
                                `;
                            }
                        });
                    }
                    for (let i = 0; i < params.length; i++) {
                        str += `${params[i].marker}
                            ${params[i].seriesName}
                            ${params[i].data}%<br>`;
                    }
                    return str;
                };
                option.yAxis[0].axisLabel = {
                    formatter: '{value} %'
                };
                const nameArr = res.type || [];
                const datas = res.y || [];
                option.legend.data = nameArr;
                option.series = [];
                for (let i = 0; i < datas.length; i++) {
                    option.series.push({
                        name: nameArr[i],
                        type: 'bar',
                        barWidth: '50px',
                        label: {
                            show: true,
                            position: 'inside',
                            formatter: '{c}'
                        },
                        stack: i < 2 ? 'Bz' : 'Mb',
                        emphasis: {
                            focus: 'series'
                        },
                        data: datas[i]
                    });
                }
                // 1、清除画布
                myChart.clear();
                myChart.hideLoading();
                // 2、调用setOption
                option && myChart.setOption(option);
            });
            // 3、在渲染点击事件之前先清除点击事件
            myChart.off('click');
            // triggerEvent为true时，触发点击事件
            myChart.on('click', params => {
                console.log(params, 'doplan');
                let state;
                if (params.seriesName === '未完成标准') {
                    state = 0;
                }
                if (params.seriesName === '已完成标准') {
                    state = 1;
                }
                if (params.seriesName === '已完成目标') {
                    state = 2;
                }
                if (params.seriesName === '未完成目标') {
                    state = 3;
                }

                this.echartState = state;

                if (params.name === '学校层') {
                    this.echartCode = 'XT_WH_XX';
                }
                if (params.name === '专业层') {
                    this.echartCode = 'XT_WH_ZY';
                }
                if (params.name === '课程层') {
                    this.echartCode = 'XT_WH_KC';
                }
                if (params.name === '教师层') {
                    this.echartCode = 'XT_WH_JS';
                }
                if (params.name === '学生层') {
                    this.echartCode = 'XT_WH_XS';
                }
                this.tableDataType = 'echart';
                this.$refs.doplanSearch.resetQueryParam();
                this.getTableData('echart');
            });
        },
        handleSearch (params, isSearch, empty) {
            if (isSearch === 'init') this.page.pageIndex = 1
            console.log(params, isSearch, 'ab');
            this.tableDataType = isSearch;
            this.searchParams = { ...params };
            this.getTableData(isSearch);
        },
        // 获取参数
        getParams (searchType) {
            console.log(searchType, 'searchType2');
            const defaultParam = {
                code: ['cm'].includes(this.indexCode) ? this.code : null,
                year: this.year,
                ...this.page,
                // 教研室/班主任诊改驾驶舱所需所属 班级/教研室ID
                classId: ['jys', 'bzr'].includes(this.indexCode)
                    ? this.code
                    : null
            };
            let params;
            if (searchType === 'init') {
                params = {
                    ...defaultParam,
                    orgId: ['jxdw'].includes(this.indexCode) ? this.code : null,
                    init: 'init'
                };
            }
            if (searchType === 'search') {
                if (['zlzx', 'jxdw', 'cm'].includes(this.indexCode)) {
                    params = {
                        ...defaultParam,
                        ...this.searchParams,
                        code: this.searchParams.indexX
                            ? this.searchParams.indexX
                            : this.code,
                        angle: this.searchParams.rectificationRangeId,
                        search: 'search'
                    };
                }
                if (this.indexCode === 'jys' || this.indexCode === 'bzr') {
                    params = {
                        ...defaultParam,
                        ...this.searchParams,
                        orgId: this.searchParams.belongTwoLevelSchool,
                        state: this.searchParams.editStatus,
                        search: 'jys/bzr'
                    };
                }
            }
            if (searchType === 'echart') {
                params = {
                    ...defaultParam,
                    state: this.echartState,
                    code: this.echartCode,
                    orgId: ['jxdw'].includes(this.indexCode) ? this.code : null,
                    echart: 'echart'
                };
            }
            return params;
        },
        // searchType: 'search' 为查询参数 ，'init' 为初始参数,'echart' 为echarts查询参数
        getTableData (searchType) {
            this.tableLoading = true;
            if (['zlzx', 'jxdw', 'cm'].includes(this.indexCode)) {
                getPointInfoList(this.getParams(searchType)).then(res => {
                    this.tableData = res.dataList;
                    this.total = res.total;
                    this.tableLoading = false;
                });
            }
            if (this.indexCode === 'jys' || this.indexCode === 'bzr') {
                getPointSpeedInfoList(this.getParams(searchType)).then(res => {
                    this.jbTableData = res.dataList;
                    this.total = res.total;
                    this.tableLoading = false;
                });
            }
        },
        downloadFile () {
            if (['zlzx', 'jxdw', 'cm'].includes(this.indexCode)) {
                getPointInfoListExport(this.getParams(this.tableDataType)).then(
                    res => {
                        // console.log(res);
                        this.downFile(res);
                        this.$refs.doplanSearch &&
                            (this.$refs.doplanSearch.downloading = false);
                    }
                );
            }
            if (this.indexCode === 'jys') {
                getTeacherPointSpeedInfoListExport(
                    this.getParams(this.tableDataType)
                ).then(res => {
                    this.downFile(res);
                });
            }
            if (this.indexCode === 'bzr') {
                getPointSpeedInfoListExport(
                    this.getParams(this.tableDataType)
                ).then(res => {
                    this.downFile(res);
                });
            }
        },
        downFile (res) {
            this.common.downloadFile(res, {
                name: `${this.year}年${this.manageType}`,
                fileType: '.xlsx'
            });
            ['jys', 'bzr'].includes(this.indexCode) &&
                (this.$refs.doplancockSearch.downloading = false);
        },
        // 分页器参数回传方法
        pagination (page) {
            console.log(page, 'params');
            this.page = page;
            this.getTableData(this.tableDataType);
        },
        lockDetail (item) {}
    }
};
</script>
